<template>
  <div class="mb-2">
    <el-button type="primary" @click="showDialog=true">新增</el-button>
  </div>

  <AutoTable :table-data="tableData" :columns="columns">
    <template #handle="scope">
      <el-button type="primary" size="small">修改</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </template>
  </AutoTable>

  <el-dialog v-model="showDialog" title="新增分类" width="500px">
    <div>
      <el-form>
        <el-form-item label="培训形式">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="考核方式">
          <el-radio-group v-model="formData.type">
            <el-radio label="1">线上签到</el-radio>
            <el-radio label="2">观看视频</el-radio>
            <el-radio label="3">线上答题</el-radio>
            <el-radio label="4">文章浏览</el-radio>
            <el-radio label="5">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类描述">
          <el-input type="textarea" v-model="formData.reason"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "index"
}
</script>
<script setup>
import AutoTable from '@/components/AutoTable'
import {ref, reactive} from "vue";

const showDialog = ref(false)
const formData = reactive({
  title: '',
  type: '',
  reason: '',
})

let tableData = reactive([
  {
    px: '培训形式',
    kx: '考核形式',
    reason: '说明',
  }
])

const columns = [
  {
    label: '培训形式',
    prop: 'px'
  },
  {
    label: '考核形式',
    prop: 'px'
  },
  {
    label: '说明',
    prop: 'reason'
  },
  {
    label: '操作',
    tdSlot: 'handle'
  },
]

const submitForm = () => {
  tableData.push(
      {
        px: '培训形式-1',
        kx: '考核形式-1',
        reason: '说明-1',
      }
  )
  showDialog.value = false
}

</script>

<style scoped>

</style>
